<template>
  <div id="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
// 导入iscroll的专业版本
import IScroll from 'iscroll/build/iscroll-probe'
export default {
  name: 'scrollView',
  mounted () {
    this.iscroll = new IScroll(this.$refs.wrapper, {
      // 禁用鼠标滚动和滚动条事件
      mouseWheel: true,
      scrollbars: false,
      // 详细监听
      probeType: 3,
      // 解决iscroll卡顿问题
      scrollX: false,
      scrollY: true,
      disablePointer: true,
      disableTouch: false,
      disableMouse: true
    })

    /**
    MutatioObserve 构造函数只要监听到了指定内容发生了变化 就会执行传入的回调函数
    接收两个参数
    mutationList: 发生变化的数组
    observe:观察者对象
  */
    const observe = new MutationObserver(() => {
      this.iscroll.refresh()
    })
    // 需要观察的内容
    const config = {
      childList: true, // 棺材目标子节点的变化, 添加或者删除
      subtree: true, // 默认为false 设置true 可以观察后代节点
      attributeFilter: ['height', 'offsetHeight'] // 观察特性 观察子节点的高度变化
    }
    // 告诉观察者对象 我们需要观察谁 需要观察什么内容
    /**
    * @description: observe 观察者
    * @param {type} 第一个参数:观察谁 第二个参 观察的内容
    * @return:
    */
    observe.observe(this.$refs.wrapper, config)
  },
  methods: {
    // 提供一个监听滚动距离的方法给外界使用
    scrolling (fn) {
      this.iscroll.on('scroll', function () {
        fn(this.y)
      })
    },
    // 计算滚动高度
    refresh () {
      setTimeout(() => {
        this.iscroll.refresh()
      }, 100)
    },
    // 把内容滚动到指定的坐标。
    scrollTo (x, y, time) {
      this.iscroll.scrollTo(x, y, time)
    }
  }
}
</script>

<style lang="scss" scoped>
#wrapper {
  width: 100%;
  height: 100%;
}
</style>
